<template>
  <div>
    <a-form-item
      label="题目"
      :field="'topic.' + index + '.title'"
      :rules="{
        required: true,
        message: '题目内容不能为空',
      }"
    >
      <a-input v-model="topic.title" placeholder="请输入题目内容" />
    </a-form-item>
    <a-form-item label="题目说明">
      <a-input v-model="topic.desc" placeholder="请输入题目说明，可以为空" />
    </a-form-item>
    <a-form-item
      label="必填项"
      :field="'topic.' + index + '.isRequired'"
      :rules="{
        type: 'boolean',
        required: true,
        message: '请选择是否为必填项',
      }"
    >
      <div class="option-addtion">
        <a-switch
          v-model="topic.isRequired"
          active-text="是"
          inactive-text="否"
        />
      </div>
    </a-form-item>
  </div>
</template>

<script lang="ts" setup>
  import { watch, ref } from 'vue';

  const emit = defineEmits(['update:data']);
  const props = defineProps({
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
    index: {
      type: Number,
    },
  });
  const topic = ref(props.data);

  watch(topic.value, (value) => {
    emit('update:data', value);
  });
</script>
